.list-items.message-list-view {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #EBEBEB;

    .message-item {
        padding: px2rem(10px) px2rem(26px);

        .message-item-cont {
            background-color: #FCF6D6;
            padding-left: px2rem(28px);
            border-radius: px2rem(16px);
            border: px2rem(2px) solid #E4E4E4;

            .title {
                position: relative;
                padding: px2rem(28px) 0;
                border-bottom: px2rem(2px) solid #E4E4E4;
                font-size: 0;

                img,
                .head {
                    display: inline-block;
                    vertical-align: middle;
                    width: px2rem(80px);
                    font-size: px2rem(30px);
                    text-align: center;
                    background-color: #E84F4B;
                    color: #fff;
                    height: px2rem(80px);
                    line-height: px2rem(80px);
                    border-radius: px2rem(80px);
                    margin-right: px2rem(37px);
                }
                img {
                    background: none;
                }
                .time,
                .name {
                    position: relative;
                    display: inline-block;
                    vertical-align: middle;
                    height: px2rem(80px);
                    line-height: px2rem(80px);
                    font-size: px2rem(36px);
                    color: #333;
                }
                .time {
                    position: absolute;
                    top: px2rem(28px);
                    right: px2rem(28px);
                    font-size: px2rem(24px);
                    color: #999999;
                }
            }

            .info {
                padding: px2rem(13px) px2rem(28px);

                .info-item {
                    height: px2rem(54px);
                    line-height: px2rem(54px);
                    font-size: 0;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;

                    .label,
                    .text {
                        display: inline-block;
                        vertical-align: middle;
                        font-size: px2rem(28px);
                        color: #999999;

                    }
                    .label {
                        margin-right: px2rem(16px);
                    }

                    &.info-item-name {

                        .label {
                            color: #0F9CFF;
                        }
                        .text {
                            color: #666666;
                        }
                    }
                    &.wait .label {
                        color: #999;
                    }
                    &.pass .label {
                        color: #0F9CFF;
                    }
                    &.reject .label {
                        color: #FF0000;
                    }
                }

            }

            &.approve {
                .info {
                    .info-item.info-item-name {
                        .label {
                            color: #0F9CFF;
                        }
                    }
                }
            }

            &.message {
                .info {
                    .info-item.info-item-name {
                        .label {
                            color: #28B778;
                        }
                    }
                }
            }

            &.warn {
                .info {
                    .info-item.info-item-name {
                        .label {
                            color: #FF0000;
                        }
                    }
                }
            }

            &.system {
                .info {
                    .info-item.info-item-name {
                        .label {
                            color: #FF0000;
                        }
                    }
                }
            }
        }
    }
    .read .message-item .message-item-cont {
        background: #FFFFFF;
    }
    .ui-item:first-child .message-item {
        padding-top: px2rem(26px);
    }
    .ui-item:last-child .message-item {
        padding-bottom: px2rem(26px);
    }
}